<template>
  <div>
    <el-form :model='cForm' class="demo-form-inline"  :inline="true"  >
     
        <el-form-item label='一级分类'>
            <!-- select组件的自定义change事件,会自动传参,传递的参数就是遍历后每一项的id
            且当select的中的option发生变化时触发
             -->
            <el-select  :disabled='show'  @change='categoryList2' v-model='cForm.category1Id'  placeholder="请选择">
            <el-option :label="c1.name" :value="c1.id"  v-for='(c1,index) in cateList1' :key='c1.id'></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label='二级分类'>
            <el-select :disabled='show' @change="categoryList3" v-model='cForm.category2Id'  placeholder="请选择">
            <el-option :label="c2.name" :value='c2.id' v-for="(c2,index) in cateList2" :key='c2.id' ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label='三级分类'>
          <el-select :disabled='show' @change='handler' v-model='cForm.category3Id'  placeholder="请选择">
            <el-option :label="c3.name" :value='c3.id' v-for="(c3,index) in cateList3" :key='c3.id' ></el-option>
            </el-select>
        </el-form-item>
      
    </el-form>
  </div>
</template>

<script>
export default {
    name:'CategoryAttr',
    props:['show'],
    data(){
        return {
        // 初始化id
            cForm:{
                category1Id:'',
                category2Id:'',
                category3Id:''
            },
            // 初始化分类
            cateList1:[],
            cateList2:[],
            cateList3:[],
        }
    },
    // 组件一挂载就获取一级分类
    mounted(){
        this.categoryList1()
    },
    methods:{
        // 封装请求 获取一级分类列表
        async categoryList1(){
           let result=await this.$API.attr.reqCategorylist1()
           if(result.code==200){
               this.cateList1=result.data
           }
        },
        // 获取二级分类列表[一级分类的change回调]
        async categoryList2(category1Id){
            // 触发自定义事件,向父组件传递id,i数据以对象形式传递并设置标志属性,便于父组件区分几级分类id
            this.$emit('getCategoryId',{categoryId:this.cForm.category1Id,flag:1})
            //  bug:  当第一选择结束后,再次选择一级列表分类内容时,二级分类和三级分类的内容和id依旧存在
            // 所以在发送请求前,触发change回调,将id 和分类内容清空
            this.cForm.category2Id=''
            this.cForm.category3Id=''
            this.cateList2=[]
            this.cateList3=[]
            let result = await this.$API.attr.reqCategorylist2(category1Id)
            if(result.code==200){
                this.cateList2=result.data
            }
        },
        // 获取三级分类列表[二级分类的change回调]
        async categoryList3(category2Id){
            // 传递数据一定是在清空之前
             this.$emit('getCategoryId',{categoryId:this.cForm.category2Id,flag:2})
            // 发送请求前,触发change回调,将id 和分类内容清空
            this.cForm.category3Id=''
            this.cateList3=[]
            let result = await this.$API.attr.reqCategorylist3(category2Id)
            if(result.code==200){
                this.cateList3=result.data
            }
        },
        handler(){
            this.$emit('getCategoryId',{categoryId:this.cForm.category3Id,flag:3})
        }
    }

}
</script>

<style>

</style>